<!--
 * @Author: dfh
 * @Date: 2024-03-15 11:26:29
 * @LastEditors: dfh
 * @Modified By: dfh
 * @describe: 
-->
<template>
    <picker class="c-b" mode='selector' :range="rateList" range-key="currencyZn" :value="currentIdx"
        @change="(e) => changeHandle(e, type)">
        <view class="c-b">
            <text class="s_title">{{ title }}</text>
            <text class="num">{{ num }}</text>
            <text class="tip">{{ tip }}</text>
        </view>
    </picker>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
    type: {
        type: String,
        default: ''
    },
    title: {
        type: String,
        default: ''
    },
    num: {
        type: Number,
        default: 0.00
    },
    tip: {
        type: String,
        default: ''
    },
    rateList: {
        type: Array,
        default: () => []
    }
})

const emits = defineEmits(['changeHandle'])
const currentIdx = ref(0);

const changeHandle = (e, type) => {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    const index = e.detail.value;
    currentIdx.value = index;
    const data = props.rateList[index]
    emits('changeHandle', { type, data })
}
</script>

<style lang="scss" scoped>
.c-b {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .s_title {
        font-size: 26rpx;
        color: rgba(49, 47, 47, 0.6);
    }

    .num {
        margin: 16rpx 0 8rpx;
        font-size: 38rpx;
        color: rgb(238, 81, 67);
        font-weight: 700;
    }

    .tip {
        font-size: 24rpx;
        color: rgb(190, 192, 195);
    }
}
</style>